<script setup>
import AvatarUsernameAccount from "@/views/my/components/AvatarUsernameAccount.vue";
import GoBackAndSearchNav from "@/components/GoBackAndSearchNav.vue";
import {ref} from "vue";
import {updateUsernameAPI} from "@/api/user.js";
import useAccountStore from "@/store/modules/AccountStore.js";
import {useRouter} from "vue-router";

const router = useRouter()
const env = import.meta.env
const USERNAME_MAX_LEN = env.VITE_USERNAME_MAX_LEN

const newUsername = ref('')

const updateUsername = async () => {
  const res = await updateUsernameAPI(newUsername.value)
  if (res) {
    useAccountStore().saveUser(res)
    router.back()
  }
}
</script>

<template>
  <div class="update-username">
    <GoBackAndSearchNav :title="'修改用户名'" :placeholder="true"></GoBackAndSearchNav>
    <div class="p-2 text-gray-400">效果预览</div>
    <AvatarUsernameAccount :username="newUsername"></AvatarUsernameAccount>
    <div class="p-2 text-gray-400">输入新用户名</div>
    <van-field
        v-model="newUsername"
        label="新用户名"
        placeholder="请输入新用户名"
        :maxlength="USERNAME_MAX_LEN"
        show-word-limit
    />
    <div class="mt-2 p-2">
      <van-button block
                  round
                  @click="updateUsername"
                  color="linear-gradient(to right, #e2ecf7, #24cab1, #e2ecf7)">
        确认更换用户名
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>